<template>
  <q-list separator no-border>
    <q-inner-loading :visible="loading" style="height: 50vh">
      <q-spinner-Dots size="50px" color="primary"></q-spinner-Dots>
    </q-inner-loading>
    <a-none v-if="forums.length === 0"></a-none>
    <q-item v-for="instance in forums" :class="{'q-py-md': $q.screen.gt.md, 'q-px-xs': $q.screen.lt.sm }" :key="instance.id">
      <q-item-section avatar class="gt-sm">
        <a-head :user="instance.user" :username="false"></a-head>
      </q-item-section>
      <q-item-section>
        <div class="row items-center text-grey-10 q-pb-xs size-16" :class="{'q-pb-sm q-mr-sm': $q.screen.lt.sm }">
          <router-link :to="'/forum/'+instance.id + '/'" class="col row text-grey-9 bold hover-negative" :class="{'size-18': $q.screen.gt.md}">
            {{ instance.title }}
          </router-link>
          <div v-if="instance.top">
          <q-chip small dense square color="negative" text-color="white">置顶</q-chip>
          </div>
        </div>
        <div class="row tems-center text-grey-6" :class="{'size-14': $q.screen.gt.sm, 'size-12 q-mr-sm': !$q.screen.gt.sm }">
          <div class="col">
            <span class="q-mr-sm">{{ timesince(instance.update_date) }}</span>
            <span class="q-mr-sm">{{ instance.user.username }}</span>
            <span v-if="type === 'all'">{{ typeIndex[instance.category] }}</span>
          </div>
          <div class="row items-center">
            <div class="q-mr-md"><q-icon class="q-mr-xs" name="message"/>{{ instance.comment_number }}</div>
            <div><q-icon class="q-mr-xs" name="thumb_up"/>{{ instance.up_number }}</div>
          </div>
        </div>
        <!--<q-item-tile sublabel lines="2" class="size-14 gt-sm ellipsis" text-color="grey-6">-->
        <!--{{ instance.content }}-->
        <!--</q-item-tile>-->
      </q-item-section>
      <!--<q-item-side right>-->
      <!--<q-chip small class="size-12" color="grey-3" text-color="grey-9">{{ timesince(instance.add_date) }}</q-chip>-->
      <!--<q-chip small class="size-12" color="negative">{{ instance.comment_number }}</q-chip>-->
      <!--</q-item-side>-->
    </q-item>
  </q-list>
</template>

<script>

  export default {
    name: 'aForumList',
    props: {
      forums: {
        type: Array,
        required: true
      },
      type: {
        type: String,
        required: false,
        default: 'all'
      },
      loading: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    data () {
      return {
        shareDialogId: null,
        typeIndex: {
          1: '讨论',
          2: '反馈',
          3: '公告',
          4: '灌水'
        }
      }
    },
    methods: {
      onMenuClick (id) {
        this.$emit('menuClick', id)
      }
    }
  }
</script>

<style>

</style>
